<template>
  <div></div>
</template>

<script setup>
import { ref, inject, onMounted, onUnmounted} from 'vue'
import { DrawCircle, DrawLine, DrawPolygon, DrawRect } from '@antv/l7-draw'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
const route = useRoute()
const mapScene = inject('mapScene')

let draw = ref(null)
onMounted(() => {
  if (draw.value) {
    draw.value.clear()
    draw.value.destroy()
    draw.value = null
  }
  let type = route.params.type
  initDraw(type)
  mapScene.value.map.flyTo({
    center: [114.29, 30.59],
    zoom: 10,
    pitch: 45,
  })

})
onBeforeRouteUpdate((to) => {
  //to from 标识 去哪个路由 和来自来个路由
  if (draw.value) {
    draw.value.clear()
    draw.value.destroy()
    draw.value = null
  }
  let type = to.params.type
  initDraw(type)
})
function initDraw(type) {
  switch (type) {
    case 'line':
      draw.value = new DrawLine(mapScene.value.scene, {
        distanceOptions: {},
      })
      break
    case 'rect':
      draw.value = new DrawRect(mapScene.value.scene, {
        areaOptions: {},
      })
      break
    case 'circle':
      draw.value = new DrawCircle(mapScene.value.scene, {
        areaOptions: {},
      })
      break
    case 'polygon':
      draw.value = new DrawPolygon(mapScene.value.scene, {
        areaOptions: {},
      })
      break
  }
  draw.value.enable()
}
onUnmounted(() => {
  if (draw.value) {
    draw.value.clear()
    draw.value.destroy()
    draw.value = null
  }
})
</script>

<style scoped></style>
